import { CSSProperties, ReactNode, forwardRef } from 'react';

import type { ButtonProps } from 'antd';

type Props = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
} & ButtonProps;

const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
  { children, className, style, onClick }: Props,
  ref,
) {
  return (
    <button
      ref={ref}
      style={style}
      className={`flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-hover ${className}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
});
export default IconButton;

// export default function IconButton({ children, className, style, onClick }: Props) {
//   return (
//     <button
//       style={style}
//       className={`flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-hover ${className}`}
//       onClick={onClick}
//     >
//       {children}
//     </button>
//   );
// }
